import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import ListScroller from '@/components/ListScroller'
import ResponsiveImage from '@/components/ResponsiveImage'
import css from './section.module.scss'
class BangumiSection extends PureComponent {    
    static propTypes = {
        detailData: PropTypes.object
    }

    get hasSection() {
        return (!!this.props?.detailData?.mediaInfo?.section) ?? false        
    }    

    get sections () {
        return this.props?.detailData?.mediaInfo?.section ?? []    
    }

    get currentEpisodeId() {
        return this.props?.detailData?.epInfo?.id ?? -1
    }    
    
    epScrollers = []

    setEpScroller = el => {
        this.epScrollers.push(el)
    }

    focusEp = (index) => {      
        const epScroller = this.epScrollers[index]  
        const current = epScroller.listRef.current
        const $el = current.querySelector('.active')    
        $el && epScroller.scrollToElement($el, 300)
    }

    handleSection = item => {
        this.props.history.push(`/bangumi/ep${item.id}`)
    }

    componentDidUpdate() {        
        this.epScrollers = []
    }

    render() {
        return (
            <>
                {
                    this.hasSection && this.sections.map((item, index) => {
                        return (
                            <div key={item.id} className={css["wrap"]}>
                                <div className={css["head"]}>
                                    <span className={css["title"]}>{item.title}</span>
                                </div>

                                <ListScroller 
                                    ref={this.setEpScroller} 
                                    className={css['section-list']} 
                                    scrollX
                                    onInit={() => this.focusEp(index)}
                                >
                                    {
                                        item.episodes.map(ep => {
                                            return (
                                                <div key={ep.id} onClick={() => this.handleSection(ep)} className={
                                                    `${css["section-item"]} ${this.currentEpisodeId === ep.id ? 'active' : ''}`
                                                }>
                                                    <ResponsiveImage className={css['cover']} src={ep.cover} size="@170w_106h" ></ResponsiveImage>
                                                    <div className={css["desc"]}>{ ep.long_title || ep.title }</div>
                                                </div>
                                            )
                                        })
                                    }                        
                                </ListScroller>

                            </div>
                        )
                    })                        
                }   
            </>
        )
    }
}

export default withRouter(BangumiSection)